<template>
	<Display class="display" :responseData="responseData"></Display>

</template>

<script>
	import CryptoJS from "crypto-js";
	import Display from "/pages/LayoutDisplay/LayoutDisplay.vue"
	import OfflineData from '/common/offline-data-cache.js'
	import {connect} from '../../common/websock-client.js'
	export default {
		components: {
			Display
		},
		data() {
			return {
				title: 'Hello',
				requestTime: 0,
				replyTime: 0,
				deviceTime: '1704944944142',
				encryption: {
					key: '375c9e89fc20726e',
					offset: 'abc1234567890efg',
					padding: 'CryptoJS.pad.Pkcs7',
					encode: 'Hex',
					mode: 'CryptoJS.mode.CBC'
				},
				cipherText: '',
				responseData: {},
				running: false,
				interDuration: 1000,
				interval: null,
				mqttClient: null
			}
		},
		computed: {
			xboxUrl() {
				return OfflineData.getSetting('xboxUrl'); 
			},
			encryptionKey() {
				return OfflineData.getSetting('encryptionKey');
			},
			machineCode() {
				return OfflineData.getSetting('machineCode');
			},
			fixedParam() {
				const json = OfflineData.getSetting('fixedParam');
				try {
					return JSON.parse(json);
				}catch(e){
					console.warn(e)
					return {}
				}
			},
			requestParam() {
				const json = OfflineData.getSetting('requestMap');
				try {
					return JSON.parse(json);
				}catch(e){
					console.warn(e)
					return {}
				}
			},
			requestData() {
				return JSON.stringify( {
					...this.requestParam,
					"time": this.deviceTime
				})
			},
			duration() {
				return this.replyTime - this.requestTime
			}
		},
		mounted() {
			this.mqttClient = connect();
			this.start()
			this.preivew();
		},
		methods: {
			// 获取设备时间
			getDeviceTime() {
				return new Promise((resolve, reject)=>{
					uni.request({
					    url: this.xboxUrl+'/api/getTime', //仅为示例，并非真实接口地址。
					    method: 'POST',
					    success: (res) => {
							const data = res.data
							this.deviceTime = data.result.data
							resolve(this.deviceTime)
					    },
						fail:(err)=>{
							reject(err)
						}
					});
				})
			},
			// 加密请求数据
			encrypt() {
				const key = CryptoJS.enc.Utf8.parse(this.encryption.key); //16位
				const iv = CryptoJS.enc.Utf8.parse(this.encryption.offset);
				const mode = CryptoJS.mode.CBC
				const padding = CryptoJS.pad.Pkcs7
				const text = this.requestData
				const cipher = CryptoJS.AES.encrypt(text, key, {
					iv,
					mode,
					padding
				})
				this.cipherText = cipher.ciphertext.toString(CryptoJS.enc.Hex)
			},
			// 获取实时数据
			async getRealData() {
				this.requestTime = new Date().getTime();
				this.replyTime = this.requestTime
				// 先获取时间
				await this.getDeviceTime();
				// 加密参数
				this.encrypt();
				const self = this;
				uni.request({
				    url: this.xboxUrl+'/api/datagroup/getTagsValue', //仅为示例，并非真实接口地址。
				    method: 'POST',
					data: {
						para: this.cipherText
					},
				    success:(res)=> {
						const data = res.data
						this.responseData = {
							success: true,
							...data.result.data
						}
					
						this.replyTime = new Date().getTime()
				    },
					fail(err){
						this.responseData = {
							success: false
						}
					}
				});
			},
			start() {
				this.running = true
				this.getRealData()
				// 获取间隔时间
				const duration = this.fixedParam.interDuration || this.interDuration
				this.interval = setInterval(()=>{
					this.getRealData()
				}, duration)
			},
			stop() {
				this.running = false
				clearInterval(this.interval)
			},
			handleKeyup(event) {
				alert(JSON.stringify(event))
			},
			preivew() {
				// #ifdef H5
				document.getElementsByTagName('html')[0].style['font-size'] = '16px';
				// #endif
			}
		}
	}
</script>

<style>
	/* #ifdef H5 */
	.display {
		margin: 10px auto;
		position: relative;
		width: 1080px;	
		height: 1920px;
		}
	/* #endif */
	.mt-8 {
		margin-top: 8rpx;
	}
	.pa-8 {
		padding: 8rpx;
	}
</style>